<template>
  <div class="chart-wrapper">
    <!-- 条形图 -->
    <div ref="barRef" class="chart-left"></div>

    <!-- 饼图 -->
    <div ref="pieRef" class="chart-right"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts/core'

// 按需引入条形图、饼图及通用组件
import { BarChart, PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import genreMapping from '@/assets/genreMapping' // 导入映射

echarts.use([
  BarChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  CanvasRenderer
])

const barRef = ref(null)
const pieRef = ref(null)

/* --- 新增：接口调用 --- */
async function fetchPieData() {
  const resp = await fetch('/api/queryGenre8to10MoviesCount')
  if (!resp.ok) throw new Error('fetch pie data error')
  return resp.json()   // Array<{genre:string, count:number}>
}

/* ---------- 新增：条形图接口 ---------- */
async function fetchBarData() {
  const resp = await fetch('/api/queryGenreRankInVote')
  if (!resp.ok) throw new Error('fetch bar data error')
  console.log(resp.body)
  return resp.json()   // Array<{genre:string, avgVote:number}>
}

onMounted(async () => {
  /* ====== 条形图（改为接口数据） ====== */
  const barChart = echarts.init(barRef.value)

  // 取数据并拆成 yAxis 与 series 需要的样子
  const barRaw = await fetchBarData()

  // 按 avgVote 降序排列
  barRaw.sort((a, b) => a.avgVote - b.avgVote)

  const yAxisData = barRaw.map(it => genreMapping[it.genre] || it.genre) // 使用映射转换
  const seriesData = barRaw.map(it => it.avgVote)       // 平均评分

  const TRAD_DARK  = '#7EB3C6'
  const TRAD_LIGHT = '#A8C8C8'

  barChart.setOption({
    title: {
      text: '各电影类型平均评分排行榜',
      left: 'center',     // 水平居中
      top: 8,             // 离顶部距离，可微调
      textStyle: {
        fontSize: 20      // 字号放大一点
      }
    },
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    legend: {},
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      min: 5.5,                       // 1. 轴从 5.5 开始
      max: function (value) {         // 2. 让最大值自适应
        return value.max + 0.02
      },
      axisLine: { onZero: false },    // 3. 不画 0 基线
      splitLine: { show: false },     // 4. 去掉纵向网格线（可选）
      axisLabel: {
        formatter: v => (v >= 5.5 ? v.toFixed(1) : '') // 5. 隐藏 0~5.5 文字
      }
    },
    grid:{
      left: '12%',
    },
    yAxis: {
      type: 'category',
      data: yAxisData,
      width: 5,
      axisLabel: {
        fontSize: 12, // 增加字体大小
        rotate: 0, // 设置标签旋转角度，0 表示不旋转
        interval: 0, // 显示所有标签
        margin: 8, // 标签与轴线的距离
        formatter: function(value){
          return value.length > 5 ? value.substring(0, 5) + '...' : value; // 如果标签过长，进行截断
        }
      },
      axisTick: {
        show: false // 如果不需要刻度线，可以隐藏
      }
    },
    series:
    //     [
    //   {
    //     type: 'bar',
    //     data: seriesData,
    //     itemStyle: {
    //       color: function(params) {
    //         // 根据索引交替返回不同的颜色
    //         const colors = ['#7EB3C6', '#A8C8C8'];
    //         return colors[params.dataIndex % colors.length];
    //       }
    //     }
    //   }
    // ]
        [
      {
        type: 'bar',
        data: seriesData,         // 接口返回的 avgVote 数组
        itemStyle: {
          // borderRadius: [0, 6, 6, 0],           // 圆角
          color:
              // '#B5B5B5'
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: TRAD_LIGHT },
            { offset: 1, color: TRAD_DARK }
          ])
        }
      }
    ]
  })

  /* ====== 饼图 ====== */
  const pieChart = echarts.init(pieRef.value)

  // 获取并格式化数据
  const rawData = await fetchPieData()
  // 按数量降序排列
  rawData.sort((a, b) => b.count - a.count)
  const pieData = rawData.map(item => ({
    name: genreMapping[item.genre] || item.genre,
    value: item.count
  }))

  const COLOR_19 = [
    '#d7a679', '#c7513a', '#b54a3a', '#9b393c', '#7e3c3a',
    '#6a493c', '#5d5d5d', '#4a4a4a', '#3d5a80', '#5b8a9a',
    '#7eb3c6', '#a8c8c8', '#c4d5d4', '#d7d7b1', '#e3e0b1',
    '#f3d7a1', '#f0cd90', '#f5c97e', '#f9b572'
];

  pieChart.setOption({
    title: {
      text: '平均评分8~10分各电影类型占比',
      left: 'center',     // 水平居中
      top: 8,             // 离顶部距离，可微调
      textStyle: {
        fontSize: 20      // 字号放大一点
      }
    },
    tooltip: {trigger: 'item'},
    legend: {
      orient: 'horizontal',   // 横向排列
      bottom: 0,              // 贴底
      left: 'center',         // 水平居中
      itemGap: 6              // 图例间隔，可微调
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '46%'],
        color: COLOR_19,
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {show: false, position: 'center', formatter: '{b}\n{d}%'},
        emphasis: {
          label: {show: true, fontSize: 28, fontWeight: 'bold'}
        },
        labelLine: {show: false},
        data: pieData          // <-- 仅这里替换为接口数据
      }
    ]
  })

  /* 响应式：窗口变化时重绘 */
  window.addEventListener('resize', () => {
    barChart.resize()
    pieChart.resize()
  })
})
</script>

<style scoped>
.chart-wrapper {
  display: flex;
  gap: 20px;              /* 图表间距 */
  height: 450px;          /* 图表高度 */
  padding: 0 20px;        /* 左右内边距 */
  width: 100%;            /* 宽度占满容器 */
  box-sizing: border-box; /* 包含边框和内边距 */
  max-width: 80vw;
  margin-top: -10vh;
}

/* 图表容器：卡片式 */
.chart-left,
.chart-right {
  flex: 1;
  min-width: 0;
  background: linear-gradient(135deg, #ffffff 0%, #f9fbfd 100%);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  padding: 20px 24px;
  box-sizing: border-box;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* 悬浮高亮 */
.chart-left:hover,
.chart-right:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* 响应式设计 - 小屏幕 */
@media (max-width: 768px) {
  .chart-wrapper {
    flex-direction: column;
    height: auto;
  }
  .chart-left,
  .chart-right {
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
  }
}
</style>
